<template>
  <view class="component-box" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <!-- 默认专题模板 -->
    <defaultTem
      v-if="styleType == 1"
      :propsData="propsData"
      :topicNoTabList="topicNoTabList"
    ></defaultTem>
    <!-- 有tab及列表页的专题模板 -->
    <topicWithTab
      v-if="styleType == 2"
      :propsData="propsData"
      :topicTabs="topicTabs"
      :listData="topicList"
      @tabChange="tabChange"
    ></topicWithTab>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import defaultTem from "./templates/default.vue";
import topicWithTab from "./templates/topicWithTab.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    defaultTem,
    topicWithTab,
  },
  mixins: [diyMixin], //混入文件
  watch: {},
  data() {
    return {
      topicTabs: [],
      topicList: [],
      activeTab: 0,
      topicNoTabList: [],
    };
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    topPicImg() {
      return this.propsData.params.topPicImg;
    },
    lineNum() {
      return this.propsData.params.lineNum;
    },
  },
  methods: {
    async getTypes() {
      try {
        const res = await this.$allrequest.special.getTopicType();
        if (res.code == 0) {
          this.topicTabs = res.data.list;
          if (this.topicTabs.length) {
            let tab = this.topicTabs[this.activeTab];
            this.getTopicList(tab.id);
          }
        }
      } catch (e) {}
    },
    async getTopicList(id) {
      let type = id ? id : 0;
      try {
        const result = await this.$allrequest.special.getTopicList({
          page: 1,
          limit: 99,
          type,
        });
        if (result.code == 0) {
          this.topicList = result.data.list;
          this.topicNoTabList = this.setTopicNoTabList();
        }
      } catch (e) {}
    },
    setTopicNoTabList() {
      let arr = [];
      if (!this.topicList.length) return [];
      if (this.topicList.length == 1) return this.topicList;
      arr =
        this.lineNum == 2
          ? [this.topicList[0], this.topicList[1]]
          : [this.topicList[0]];
      return arr;
    },
    topicSkip(e) {
      uni.navigateTo({
        url: "/other/special/topic?id=" + e,
      });
    },
    tabChange(e) {
      let item = e.item;
      this.getTopicList(item.id);
    },
  },
  mounted() {
    this.getTypes();
  },
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .topic-box {
    width: 100%;
    padding: 3.2vw;
    display: flex;
    align-items: center;
    .topic-img {
      .topic-line-one {
        width: 20.26vw;
        height: 5.34vw;
        margin-right: 1.6vw;
      }
      .topic-line-two {
        width: 10.67vw;
        height: 9.968vw;
        margin-right: 1.6vw;
      }
      image {
        display: block;
      }
    }
    .topic-list {
      width: 81.33%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .topic-item {
        display: flex;
        align-items: center;
        .topic-title {
          flex: 1;
          font-size: 3.73vw;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .topic-more {
          width: 14.4vw;
          display: flex;
          align-items: center;
          .split-line {
            width: 1px;
            height: 4.267vw;
            background-color: #ebebeb;
            margin: 0 2.93vw 0 1.6vw;
          }
          .more {
            font-size: 3.73vw;
            font-family: PingFang SC;
            font-weight: 400;
            color: #888888;
          }
        }
      }
    }
    .media-width {
      width: 71.73%;
    }
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
